<template>
  <div class="wrapper-jsc">
    <div class="date-box">
      <el-form :inline="true" :model="listQuery" >
        <el-form-item label="年">
          <el-date-picker
            v-model="listQuery.year"
            @change="fetchData()"
           type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="省区销售商机数据" name="first">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         
              <line-bar-chart ref='provinceChart' :listQuery='this.listQuery' />
         
         </el-row>
      </el-tab-pane>
      <el-tab-pane label="30%以上商机" name="second">
          <!-- <line-bar ref='province' :listQuery='this.listQuery' /> -->
        <ul >
          <li class="shangji_box" >
            <div class="children-box" v-for='(item,index) in list' :key='index' >
              <p class="title">{{item.stage}}
               
              </p>
              <p>¥{{item.contractAmount}} ({{item.sum}}个)
                
              </p>
            </div> 
             </li>
        </ul> 
             
           
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {  getBusinessOpportunitiesStage30 } from "@/api/province_jsc";
import {amountRule} from '@/utils/validate'
import LineBarChart from "./components/LineAndBar";
import LineBar from "./components/linesj";
export default {
  data() {
    return {
      showbtns: false,
      activeName: "first",
    
         list:[{stage:'30%',contractAmount:'4094800',sum:'14'},{stage:'50%',contractAmount:'2819000',sum:'8'},{stage:'70%',contractAmount:'675000',sum:'1'}],
        listQuery: {
        year: "2020",
        month: "0",
      },
    };
  },
  components: {
    LineBarChart,
 LineBar
  },
  created() {
    this.fetchData();
  },
 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    fetchData() {
       if(this.listQuery.year!='2020'){
         
           this.list=[];
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
           return false
         }
    
       getBusinessOpportunitiesStage30(this.listQuery).then((response) => {
         if(this.listQuery.year!='2020'){
           this.list=[];
           return false
         }
         switch(this.listQuery.month){
           case '0':
         this.list=[{stage:'30%',contractAmount:'4094800',sum:'14'},{stage:'50%',contractAmount:'2819000',sum:'8'},{stage:'70%',contractAmount:'675000',sum:'1'}]
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
          break;
             case '1':
         this.list=[]
           break;
             case '2':
        this.list=[]
           break;
             case '3':
         this.list=[]
           break;
             case '4':
   this.list=[]
           break;
             case '5':
         this.list=[]
           break;
             case '6':
         this.list=[]
           break;
             case '7':
        
           break;
             case '8':
         this.list=[{stage:'30%',contractAmount:'4094800',sum:'14'},{stage:'50%',contractAmount:'2819000',sum:'8'},{stage:'70%',contractAmount:'675000',sum:'1'}]
            this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
           break;
             case '8':
         this.list=[{stage:'30%',contractAmount:'4094800',sum:'14'},{stage:'50%',contractAmount:'2819000',sum:'8'},{stage:'70%',contractAmount:'675000',sum:'1'}]
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
          break;
             case '10':
         this.list=[{stage:'30%',contractAmount:'2300000',sum:'2'},{stage:'50%',contractAmount:'2709000',sum:'4'}]
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
          break;
             case '11':
         this.list=[{stage:'30%',contractAmount:'1766800',sum:'4'},{stage:'50%',contractAmount:'110000',sum:'4'},{stage:'70%',contractAmount:'675000',sum:'1'}]
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
          break;
            case '12':
         this.list=[{stage:'30%',contractAmount:'28000',sum:'1'},]
             this.$nextTick(() => {
            this.$refs.provinceChart.getList();
        });
          break;

         }
      //   this.list=[{stage:'30%',contractAmount:'4094800',sum:'14'},{stage:'50%',contractAmount:'2819000',sum:'8'},{stage:'70%',contractAmount:'675000',sum:'1'}]
       // this.list = response.data.data;
          for(let i=0;i<this.list.length;i++){
          
            this.list[i].contractAmount = amountRule(this.list[i].contractAmount)  
            // this.list[i].blockWorth = amountRule(this.list[i].blockWorth)
        }
      });

    },
  },
};
</script>
<style lang="scss" scoped>


.shangji_box{
  .parent-box{
    float: left;
    padding: 10px;
    margin-left: 2%;
  }
  p{
  margin: 0;
  padding: 0;
}
  margin: 10px;
  overflow: hidden;
  .title2{
 color: #429EFFFF; 
 font-weight: bold;
 font-size: 24px;
  }
  .children-box{
    float: left;
    text-align:center;
    margin: 4px;
    padding: 10px 30px;
    background: #F2F6FEFF;
    &:last-of-type {
      margin-right: 4%;
    }
    .title{
      color: #429EFFFF;
     
    }
    .text{
      color: #303133FF;
    }

  }
}

</style>
